<!-- 购物车 -->
<template>
  <div>
    <!-- 顶部navbar-->
    <van-sticky>
      <van-nav-bar title="购物车" left-arrow @click-left="onClickLeft" />
    </van-sticky>
    <!-- 渲染来自vuex的数据 并通过点击事件处理-->
    <div class="head">
      <van-grid direction="horizontal" :column-num="1">
        <van-grid-item
          v-for="(item, index) in $store.state.cart"
          :key="index"
          class="fuxiang"
        >
          <input type="checkbox" v-model="item.check" />
          <van-image :src="item.img" />
          <span>
            <span class="lianghang">{{ item.name }}</span>
            <span style="color: red" class="left1">￥{{ item.price }}</span>

            <van-stepper
              v-model="item.numb"
              theme="round"
              button-size="22"
              disable-input
            />
          </span>
        </van-grid-item>
        <div class="tmbox"></div>
      </van-grid>
    </div>

    <div class="tmbox"></div>

    <van-submit-bar button-text="提交订单" class="fu">
      <span class="hj">合计：{{ total }}</span>
      <span class="zongshu">总数：{{ quantity }}</span>
      <span class="quanxuan"
        >全选<input type="checkbox" v-model="allok"
      /></span>
    </van-submit-bar>
  </div>
</template>

<script>
// import { setItem } from "@/utils/storage";
export default {
  data() {
    return {
      arr: [],
      // list: "",
    };
  },
  created() {
    //vuewbug 页面第一次加载时加减键无作用刷新之后才会生效将list的数据类型转换一下
    // this.list = JSON.parse(JSON.stringify(this.$store.state.cart));
    // this.list = this.$store.state.cart;
    // console.log("this.list:" + this.list);
  },
  methods: {
    onClickLeft() {
      this.$router.push({
        path: "/productList",
        query: {
          listShow: true,
        },
      });
    },
  },
  computed: {
    // 总价
    total() {
      return this.$store.state.cart.reduce((zong, item) => {
        if (item.check) {
          // item.price---------list.数量
          zong = zong + item.price * item.numb;
        }
        return zong;
      }, 0);
    },
    // 总数
    quantity() {
      return this.$store.state.cart.reduce((zong, item) => {
        if (item.check) {
          zong = zong + item.numb;
        }
        return zong;
      }, 0);
    },
    // 全选
    allok: {
      // qubxuan
      set(val) {
        this.$store.state.cart.forEach((item) => {
          item.check = val;
        });
        console.log(val);
      },
      // 小轩控制全选
      get() {
        return this.$store.state.cart.every((item) => {
          return item.check === true;
        });
      },
    },
  },
  updated() {
    // setItem("cart", this.list);
  },
};
</script>

<style scoped>
.hj {
  width: 33%;
}
.zongshu {
  width: 33%;
}
.head {
  height: 100px;
}
.lianghang {
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -moz-box;
  -moz-line-clamp: 2;
  -moz-box-orient: vertical;
  overflow-wrap: break-word;
  word-break: break-all;
  white-space: normal;
  overflow: hidden;
  font-size: 13px;
}
.right1 {
  position: absolute;
  right: 40px;
  bottom: 20px;
  font-size: 15px;
}
.left1 {
  position: absolute;
  left: 200px;
  bottom: 18px;
  font-size: 20px;
}
.fuxiang {
  position: relative;
}
.right2 {
  position: absolute;
  right: 23px;
}

.quanxuan {
  /* position: relative; */
  /* left: -180px; */
  width: 33%;
}
.tmbox {
  height: 100px;
  width: 99%;
}
.anniu {
  border: 1px solid lawngreen;
  background-color: #fff;
  margin: 5px;
  width: 30px;
  height: 30px;
}
.fu {
  display: flex;
}
</style>
